<div class="mdc-data-table" style="display: flex">
  <div class="mdc-data-table__table-container">
    <table class="mdc-data-table__table" aria-label="Dessert calories">
      <thead>
        <tr class="mdc-data-table__header-row">
          <th
            class="mdc-data-table__header-cell"
            role="columnheader"
            scope="col"
          >
            Dessert
          </th>
          <th
            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
            role="columnheader"
            scope="col"
          >
            Carbs (g)
          </th>
          <th
            class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
            role="columnheader"
            scope="col"
          >
            Protein (g)
          </th>
          <th
            class="mdc-data-table__header-cell"
            role="columnheader"
            scope="col"
          >
            Comments
          </th>
        </tr>
      </thead>
      <tbody class="mdc-data-table__content">
        <tr class="mdc-data-table__row">
          <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            4.0
          </td>
          <td class="mdc-data-table__cell">Super tasty</td>
        </tr>
        <tr class="mdc-data-table__row">
          <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            4.33333333333
          </td>
          <td class="mdc-data-table__cell">I like ice cream more</td>
        </tr>
        <tr class="mdc-data-table__row">
          <th class="mdc-data-table__cell" scope="row">Eclair</th>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            6.0
          </td>
          <td class="mdc-data-table__cell">New filing flavor</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mdc-data-table__pagination">
    <div class="mdc-data-table__pagination-trailing">
      <div class="mdc-data-table__pagination-rows-per-page">
        <div class="mdc-data-table__pagination-rows-per-page-label">
          Rows per page
        </div>

        <div
          class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select"
        >
          <div
            class="mdc-select__anchor"
            role="button"
            aria-haspopup="listbox"
            aria-labelledby="demo-pagination-select"
            tabindex="0"
          >
            <span class="mdc-select__selected-text-container">
              <span
                id="demo-pagination-select"
                class="mdc-select__selected-text"
                >10</span
              >
            </span>
            <span class="mdc-select__dropdown-icon">
              <svg
                class="mdc-select__dropdown-icon-graphic"
                viewBox="7 10 10 5"
              >
                <polygon
                  class="mdc-select__dropdown-icon-inactive"
                  stroke="none"
                  fill-rule="evenodd"
                  points="7 10 12 15 17 10"
                ></polygon>
                <polygon
                  class="mdc-select__dropdown-icon-active"
                  stroke="none"
                  fill-rule="evenodd"
                  points="7 15 12 10 17 15"
                ></polygon>
              </svg>
            </span>
            <span class="mdc-notched-outline mdc-notched-outline--notched">
              <span class="mdc-notched-outline__leading"></span>
              <span class="mdc-notched-outline__trailing"></span>
            </span>
          </div>
        </div>
      </div>

      <div class="mdc-data-table__pagination-navigation">
        <div class="mdc-data-table__pagination-total">1‑10 of 100</div>
        <cv-icon
          class="mdc-data-table__pagination-button"
          data-first-page="true"
          disabled
          >first_page
        </cv-icon>
        <cv-icon
          class="mdc-data-table__pagination-button"
          data-prev-page="true"
          disabled
          >chevron_left
        </cv-icon>
        <cv-icon class="mdc-data-table__pagination-button" data-next-page="true"
          >chevron_right</cv-icon
        >
        <cv-icon class="mdc-data-table__pagination-button" data-last-page="true"
          >last_page</cv-icon
        >
      </div>
    </div>
  </div>
</div>
